import React, { Component } from "react";

// 1.0 导入Flext组件
import { Flex } from "antd-mobile";
import NavImg1 from "../../assets/images/nav-1.png";
import NavImg2 from "../../assets/images/nav-2.png";
import NavImg3 from "../../assets/images/nav-3.png";
import NavImg4 from "../../assets/images/nav-4.png";

class Nav extends Component {
  state = {};
  render() {
    return (
      <div>
        <Flex>
          <Flex.Item>
            <Flex direction="column">
              <Flex.Item>
                <img src={NavImg1} />
              </Flex.Item>
              <Flex.Item>
                <span>整租</span>
              </Flex.Item>
            </Flex>
          </Flex.Item>
          <Flex.Item>
            <Flex direction="column">
              <Flex.Item>
                <img src={NavImg2} />
              </Flex.Item>
              <Flex.Item>
                <span>合租</span>
              </Flex.Item>
            </Flex>
          </Flex.Item>
          <Flex.Item>
            <Flex direction="column">
              <Flex.Item>
                <img src={NavImg3} />
              </Flex.Item>
              <Flex.Item>
                <span>地图找房</span>
              </Flex.Item>
            </Flex>
          </Flex.Item>
          <Flex.Item>
            <Flex direction="column">
              <Flex.Item>
                <img src={NavImg4} />
              </Flex.Item>
              <Flex.Item>
                <span>去出租</span>
              </Flex.Item>
            </Flex>
          </Flex.Item>
        </Flex>
      </div>
    );
  }
}

export default Nav;
